var tipJson = [{
    image:"https://file.tiantianwailian.com/images/qrcodetip.jpg",
    name:'子二维码管理',
    content:'管理子二维码码,包含子码的添加、更新、删除等操作！至少上传一个子码才能复制链接！',
    cssname:'qrcode'
},{
    image:"https://file.tiantianwailian.com/images/copyurltip.jpg",
    name:'复制推广链接',
    content:'上传好子二维码后，可以点击此项复制链接，可复制链接、可预览二维码、可复制自定义渠道码的链接！',
    cssname:'copy'
},{
    image:"https://file.tiantianwailian.com/images/basictip.jpg",
    name:'链接基本信息',
    content:'客服链接基本信息，此项包含整个客服链接的基本信息，可在此项修改备注',
    cssname:'basic'
},{
    image:"https://file.tiantianwailian.com/images/recordtip.jpg",
    name:'完整访问记录',
    content:'访问记录完整展示，可详细展示用户是否点击链接，是否发送欢迎语，是否长按识别等数据！',
    cssname:'record'
}];
$(document).ready(function(){
	const guide_notice = '<div class="m-guide-notice-controls"><div class="m-guide-notice-controls-content"><div class="m-guide-notice-housing"><img src=""><font class="m-guide-notice-controls-title"></font><font class="m-guide-notice-controls-des"></font><div class="m-guide-notice-next-content"><span class="m-guide-notice-previous">上一步</span><span class="m-guide-notice-next">下一步</span></div></div></div></div>';
	$("body").append(guide_notice);
    var windowWidth = $(window).width();
	// if (!localStorage.getItem("guide-tip") && windowWidth>1000) {
 //        showtip();
 //    }
    // showtip();
    $(".showtip").click(()=>{
        showtip();
    })
});

function showtip(index=0){
    var item = tipJson[index];
    var top,left;
    top=$('.m-navbar-header li[data="'+ item.cssname +'"]').offset().top;
    left=$('.m-navbar-header li[data="'+ item.cssname +'"]').offset().left;
    var width1 = $('.m-navbar-header li[data="'+ item.cssname +'"]').width();
    var width2 = $('.m-guide-notice-controls-content').width();
    var height1 = $('.m-navbar-header li[data="'+ item.cssname +'"]').height();
    var t_left = Math.floor(width1 / 2 -  width2/2);
    var t_top = height1 + 15;
    $(".m-guide-notice-controls-content").css('top',top+'px');
    $(".m-guide-notice-controls-content").css('left',left+'px');
    $(".m-guide-notice-controls-content").css('transform','translateX('+t_left+'px) translateY('+t_top+'px)');
    var html = "";
    if(item.image.length > 5) {
        html += '<img src="'+ item.image +'">';
    }
    let nextindex = index+1;
    let previousindex = index-1;
    html += '<font class="m-guide-notice-controls-title">'+item.name+'</font><font class="m-guide-notice-controls-des">'+item.content+'</font>';
    if(index==0){
        html += '<div class="m-guide-notice-next-content"><span class="m-guide-notice-next" onclick="showtip('+nextindex+')">下一步</span></div>'
    }else if(index == tipJson.length-1){
        html += '<div class="m-guide-notice-next-content"><span class="m-guide-notice-previous" onclick="showtip('+previousindex+')">上一步</span><span class="m-guide-notice-next" onclick="endtip()">结束导览</span></div>'
    }else{
        html += '<div class="m-guide-notice-next-content"><span class="m-guide-notice-previous" onclick="showtip('+previousindex+')">上一步</span><span class="m-guide-notice-next" onclick="showtip('+nextindex+')">下一步</span></div>'
    }
    $(".m-guide-notice-housing").html(html);
    $(".m-guide-notice-controls").show();
    setTimeout(()=>{
        $('.m-navbar-header li[data="'+ item.cssname +'"]').trigger("click");
    },300)
}

function endtip(){
    localStorage.setItem("guide-tip",1);
    $('.m-navbar-header li[data="qrcode"]').trigger("click");
    $(".m-guide-notice-controls").hide();
}




